<template>
  <div class="status" :class="status">
    {{ textMap[status] }}
  </div>
</template>

<script setup lang="ts">
defineProps<{
  status: 'wait' | 'audit' | 'ok' | 'not'
}>()

const textMap: Record<string, string> = {
  wait: '待审核',
  audit: '已审核',
  ok: '已完成',
  not: '已拒绝'
}
</script>

<style scoped lang="scss">
.status {
  width: 118rpx;
  height: 52rpx;
  text-align: center;
  line-height: 52rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #ffffff;
  box-shadow: inset 0rpx 8rpx 16rpx 0rpx rgba(255, 255, 255, 0.3);
  border-radius: 12rpx 0rpx 12rpx 0rpx;
}
.status-wait {
  background: linear-gradient(303deg, #ff9933 0%, #ff8000 100%);
}
.status-ok {
  background: linear-gradient(303deg, #a3b4cc 0%, #8fa1b2 100%);
}
.status-not {
  background: linear-gradient(303deg, #ff5533 0%, #ff3333 100%);
}
.status-default {
  background: linear-gradient(303deg, #a3b4cc 0%, #8fa1b2 100%);
}
</style>
